<!-- file groups -->
<script> 
	
	$(function(){	
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
		    if (this.id && this.id !== '') {
		        if (ids[this.id]) {
		            $(this).remove();
		        } else {
		            ids[this.id] = this
		        }
		    }
		});
		/* external function */
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		var handleUniform = function () {
			if (!jQuery().uniform) {
				return;
			}
			var test = $("input[type=checkbox]:not(.toggle), input[type=radio]:not(.toggle, .star)");
			if (test.size() > 0) {
				test.each(function () {
					if ($(this).parents(".checker").size() == 0) {
						$(this).show();
						$(this).uniform();
					}
				});
			}
		}
		
		/* declarisasi */
		
		task_groups = $("#task_groups");
		grid_groups = $("#grid-groups");
		pgrid_groups = $("#pgrid-groups");
		btnadd_groups = $("#btn-add-groups");
		btncancel_groups =  $("#btn-cancel-groups");
		btnsave_groups = $("#btn-save-groups");
		btnedit_groups = $("#btn-edit-groups");
		btndelete_groups = $("#btn-delete-groups");
		form_groups = $("#form-groups");
		
		field_groups_id = $("#groups_id");
		field_groups_name = $("#groups_name");
		field_groups_desc = $("#groups_desc");
		
		menu = $(".menu");
		/* method started */
        handleUniform();
		
        /* make component */
		grid_groups.unugrid({
			url: 'c_groups',
			data : {task : 'LIST' },
			column :[ 
				{ label: 'Nama Group'  ,index: 'groups_name' },
				{ label: 'Keterangan'  ,index: 'groups_desc' },
				{ label: ''  ,index: 'groups_id',type: 'action' }
			],
			deleteClick : function(id,b,c){
				if (id != null){
					confr = confirm("Apa Anda yakin menghapus data ini?");
					if (confr){
						var data = $(this).data();
						$.ajax({
							type: 'POST',
							url: 'c_groups',
							data: {groups_id: id, task : 'DELETE'},
							success: function(response){
								if(response==1){
									grid_groups.trigger('reloadGrid');
									$("#grid-groups").trigger('reloadGrid');
								}
							}
						});
					}
				}
			},
			editClick : function (id, dataRow, c){
				if (id != null){
                    btncancel_groups.click();
					task_groups.val("UPDATE");
					field_groups_id.val(dataRow.groups_id);
					field_groups_name.val(dataRow.groups_name);
					field_groups_desc.val(dataRow.groups_desc);
					
					/* set checked menu */
					menu_str = dataRow.menu;
					console.log(dataRow);
					if (menu_str != null){
						menu_str = menu_str.replace("{","");
						menu_str = menu_str.replace("}","");
						menu_arr = menu_str.split(",");
						for(i=0;i<menu_arr.length;i++){
							$("#menu_checked"+menu_arr[i]).attr("checked","checked");
						}
					}
					$.uniform.update();
					form_groups.parent().parent(".portlet").show();
				}
			}
		});
		// grid_groups.jqGrid({ 
			// ajaxGridOptions : {type:"POST"},
			// serializeGridData : function(postdata) {return postdata; },
			// postData : {task : 'LIST'},
            // url: 'c_groups',
			// datatype: "json", 
			// colNames:[
				// 'Nama Group:',
				// 'Keterangan',
				// 'groups_id',
				// 'menu'],
			// colModel:[
				// { name: 'groups_name'  ,index: 'groups_name' , search : true},
				// { name: 'groups_desc'  ,index: 'groups_desc' , search : true},
				// { name: 'groups_id'  ,index: 'groups_id',key: true, hidden: true , search : false},
				// { name: 'menu'  ,index: 'menu',hidden: true , search : false}
			// ],
			// width: '700',
			// height: 'auto',
			// rowNum:10, 
			// rowList:[10,20,30], 
			// pager: '#pgrid-groups', 
			// sortname: 'groups_id', 
			// viewrecords: true, 
			// sortorder: "desc",
			// caption:"" ,
			// loadComplete : function(){
				// $( "input[type=submit],input[type=button], button" ).button();
			
			
			// }
		// }); 
		// grid_groups.jqGrid('navGrid','#pgrid-groups',{edit:false,add:false,del:false,search:false});
		// grid_groups.jqGrid('filterToolbar',{});
		
		// form_groups.dialog({
			// autoOpen: false,
			// height: "auto",
			// width: "auto",
			// modal: true
		// });
		
		/* event */
		
		// btnedit_groups.click(function(){
			
		// });
		
		// btndelete_groups.click(function(){
			// id = grid_groups.jqGrid("getGridParam","selrow");
			
		// });
				
		btnadd_groups.click(function(){
			$.uniform.update();
			task_groups.val("INSERT");
			form_groups.parent().parent(".portlet").show();
		});
		
		btncancel_groups.click(function(){
			form_groups.parent().parent(".portlet").hide();
			menu.removeAttr("checked");
		});
		
		btnsave_groups.click(function(){
			data = form_groups.serializeObject();
			$.ajax({
				url : "c_groups",
				data : data,
				type : 'POST'
			}).done(function(response){
				grid_groups.unugrid('refresh');
				btncancel_groups.click();
			});
		});
		
	});
</script>
<!-- 
	<table id="grid-groups" class="table table-striped table-bordered" ></table>
	<div id="pgrid-groups"></div>
	
	<button id="btn-add-groups">Tambah</button>
	<button id="btn-edit-groups">Ubah</button>
	<button id="btn-delete-groups">Hapus</button>
	
	<form id="form-groups" title="groups" disabled=true>
		<input type="hidden" value="INSERT" name="task" id="task_groups">
	   <table>
			<tr style="display: none">
				<td align="right">groups_id:</td>
				<td align="left"><input id="groups_id" name="groups_id" /></td>
			</tr>
			
			<tr valign=top> <td align="right">Nama Group:</td> <td align="left"><input id="groups_name" name="groups_name" /></td> </tr>
			<tr valign=top> <td align="right">Keterangan:</td> <td align="left"><input id="groups_desc" name="groups_desc" /></td> </tr>
			<tr valign=top> <td align="right">Hak Access:</td> <td align="left">
			<?php foreach($s_menus as $menu){
				echo "<input type='checkbox' class='menu' name='menu' id='menu_checked".$menu->menus_id."' value='".$menu->menus_id."'> ".ucfirst(strtolower($menu->menus_label))."<br />";
			} //var_dump($s_menus); ?></td> </tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right">
					<input style="margin-right: 5px;" type="button" id="btn-save-groups" value="Save"  />
					<input id="btn-cancel-groups" type="reset" value="Cancel" /></td>
			</tr>
		</table>
	</form> -->
	

	<div class="portlet box blue" hidden=hidden tabindex="-1" id="portlet-form-groups">
	   <div class="portlet-title">
		  <div class="caption"><i class="icon-reorder"></i>User Management</div>
		  <div class="tools">
			 <a href="javascript:;" class="collapse"></a>
		  </div>
	   </div>

		<div class="portlet-body form">
		<!-- BEGIN FORM-->
		<form action="#" id="form-groups" class="horizontal-form" onSubmit="javascript:return false;">

		<input type="hidden" value="INSERT" name="task" id="task_groups">
		<input id="groups_id" name="groups_id" hidden=hidden />
		<input id="task_id" name="task_id" hidden=hidden  />

			 <div class="form-body">
				<h3 class="form-section">Info Group</h3>
						<input type="hidden" value="INSERT" name="task" id="task_groups">
						<input type="hidden"  id="user_id" name="user_id" />
				<div class="row">
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">Nama Group:</label>
						<input id="groups_name" name="groups_name" class="form-control" />
					  </div>
				   </div>
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">Keterangan:</label>
						<input id="groups_desc" name="groups_desc" class="form-control" />
					  </div>
				   </div>
				</div>
				<h3 class="form-section">Hak Akses</h3>
				<div class="row">
				   <div class="col-md-6">
					  <div class="form-group">
						<label  class=" col-md-3 control-label">Checkboxes</label>
						<div class=" col-md-9">
							<div class="checkbox-list">
							

							<?php foreach($s_menus as $menu){
								echo '<label>
									<input type="checkbox"  class="menu" name="menu" id="menu_checked'.$menu->menus_id.'" value="'.$menu->menus_id.'"> '.ucfirst(strtolower($menu->menus_label)).'
									</label>';
							}   ?> 
							</div>
						</div>
					  </div>
				   </div>
				</div>
		
			 </div>
			 <div class="form-actions right">
				<button type="reset" id="btn-cancel-groups" class="btn default">Cancel</button>
				<button type="submit" id="btn-save-groups" class="btn blue"><i class="icon-ok"></i> Save</button>
			 </div>
		  </form>
		  <!-- END FORM--> 
	   </div>
	</div>
    
	 <div class="row">
		<div class="col-md-12">
		   <!-- BEGIN SAMPLE TABLE PORTLET-->
		   <div class="portlet box yellow">
			  <div class="portlet-title">
				 <div class="caption"><i class="icon-cogs"></i>User Management</div>
				 <div class="tools">
					<a href="javascript:;" class="collapse"></a>
				 </div>
			  </div>
			  <div class="portlet-body flip-scroll">
			  
			<button id="btn-add-groups" class="btn btn-primary">Add</button>
			<p>&nbsp;</p>
			
			  <div id="grid-groups" class="table-responsive"></div>
				</div>
			 </div>
		</div>
	</div>